const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.config.js');
const fs = require('fs');
const path = require('path');

fs.open('./src/config/env.js', 'w', function (err, fd) {
  const buf = 'export default "development";';
  fs.write(fd, buf, 0, buf.length, 0, function (err, written, buffer) {});
  fs.close(fd);
});

module.exports = merge(webpackBaseConfig, {
  devtool: 'inline-source-map',

  output: {
    /**
     * 所有模块编译完成输出的 filename 都会以这个路径为基准
     * devServer 的 publicPath 如果不是 / 的话
     * 就会以 devServer 的 publicPath 为基准输出文件,
     * 所以有 devServer publicPath 这个根本就没有用
     */
    // path: path.join(__dirname, 'dev-admin/dist'),

    /**
     * 只影响 index.html 网页中 script/link 的 src/href 属性，其路径会加上这个前缀
     * 默认情况下 src 的路径是 filename / chunkFilename 的值
     * 使用 devServer 时，如果没有 publicPath 或 其值是 / ，
     * 则编译输出会以这个路径为基准
     */
    publicPath: '/dev-admin',

    filename: '[name].js',
    chunkFilename: '[name].chunk.js'
  },

  plugins: [
    new ExtractTextPlugin({
      filename: '[name].css',
      allChunks: true
    }),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendors',
      filename: 'vendors.js'
    }),

    new HtmlWebpackPlugin({
      // 使用 devServer 时，filename 是参考 devServer 的 publicPath 的
      // 并且不能使用 ../ 这种上级相对路径
      filename: 'index.html',
      template: './src/template/index.ejs',
      inject: true
    }),

    new webpack.DefinePlugin({
      'process.env': {
        DEV: 'true'
      }
    }),
  
    new webpack.HotModuleReplacementPlugin()
  ],

  devServer: {
    /* 服务器端口相关 */
    // 不检查访问者的 host
    disableHostCheck: true,
    // 绑定的 IP， 外部可访问一定要写 0.0.0.0
    host: "0.0.0.0",
    // 监听端口
    port: 8989,
    // 所有访问启动 gzip 压缩
    compress: true,

    /* 编译完成打开页面动作 */
    // 自动打开浏览器
    open: false,
    // 让浏览器打开本机IP，而不是 host 的值
    useLocalIp: true,
    // 自动打开页面的路径, 不能写网址，前面也不要写 /
    openPage: 'dev-admin/index.html',

    /* 服务器路径相关 */
    // 最好不要改这个路径，改了之后 filename 都会以这个路径为基准输入了
    // 默认是 /
    // publicPath: '/dev-admin',

    /*
     * 提供静态文件 的目录 string|array 优先级高于 publicPath, 默认是当前目录
     * 比如这样就可以访问 localhost:8078/css/common.css
     * 直接会指向 src/assets/css/common.css 文件
     */
    contentBase: path.join(__dirname, "src/assets"),
    // 监听 contentBase 文件修改就 直接 webpage
    // watchContentBase: true

    /* 热更新 */
    // 启动热更新, 需要加入 HotModuleReplacementPlugin ，如果在 cli 里 --hot --inline 就不用加plugin了
    hot: true,
    // 以内联的形式插入HMR重新编译的代码 默认 true，false为iframe插入
    inline: true,
    // 当编译出错时，网页全屏覆盖显示错误位置
    // object|bool 默认 false
    overlay: true,

    /* API 兼容性 */
    // js使用  HTML5 History API 时
    // 任意的 404 响应都可能需要被替代为 index.html ?
    historyApiFallback: true,

    /* Https设置证书 */
    // https: true,
    // 设置 自签名 证书 ？
    // https: {
    //   key: fs.readFileSync("/path/to/server.key"),
    //   cert: fs.readFileSync("/path/to/server.crt"),
    //   ca: fs.readFileSync("/path/to/ca.pem"),
    // },

    /* 跨域代理 */
    // 代理接口地址防止跨域
    // proxy: {
    //   '/api': {
    //     // 记得要代 http:// 的 schema, 不然会错误
    //     target: 'http://goat.me',
    //     secure: false,
    //     changeOrigin: true
    //   }
    // },

    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000 
    },
  }
});